Get Started

Documentação

Get-started

Basic

Grid

Documentação

Get-started

Basic

Grid

Learn to use the Framework

The grid is based on CONTAINER and ITEM.
Every parent Div must have the CONTAINER class, as in the example below.

<div class="container">
    <div class="">
         ...
    </div>
  </div>

CONTAINER class

  • CONTAINER*
  • ROW OU COLUMN
  • WRAP OU NOWRAP
  • TOP-LEFT
  • TOP-CENTER
  • TOP-BOTTOM
  • CENTER-LEFT
  • CENTER-CENTER
  • CENTER-BOTTOM
  • BOTTOM-LEFT
  • BOTTOM-CENTER
  • BOTTOM-BOTTOM
  • space-between
  • space-between-top
  • space-between-center
  • space-between-bottom
  • space-between-stretch
  • space-between-baseline
  • space-around
  • space-around-top
  • space-around-center
  • space-around-bottom
  • space-around-stretch
  • space-around-baseline

example: 
<div class="container wrap center-center">
    <div class="">
         ...
    </div>
  </div>

ITEM class

  • flex
  • flex1
  • flex2
  • flex3
  • flex4
  • flex5
  • flex6
  • flex7
  • flex8
  • flex9
  • flex10
  • flex11
  • flex12
  • basis1
  • basis2
  • basis3
  • basis4
  • basis5
  • basis6
  • basis7
  • basis8
  • basis9
  • basis10
  • basis11
  • basis12
1
2
3 
<div class="container wrap center-center">
    <div class=" flex basis3">
         ...
    </div>
    <div class=" flex basis3">
         ...
    </div>
    <div class=" flex basis3">
         ...
    </div>
  </div>
1
2 
<div class="container">
    <div class="basis1">
         ...
    </div>
    <div class="flex">
         ...
    </div>
  </div>
1
2
3 
<div class="container">
    <div class="basis2">
         ...
    </div>
    <div class="basis3">
         ...
    </div>
    <div class="flex basis4">
         ...
    </div>
  </div>
1
2 
<div class="container">
    <div class="basis2">
         ...
    </div>
    <div class="flex basis5">
         ...
    </div>
  </div>
1
2 
<div class="container space-between">
    <div class="basis1">
         ...
    </div>
    <div class="basis5">
         ...
    </div>
  </div>
1
2
3
4 
<div class="container">
    <div class="basis2">
         ...
    </div>
    <div class="basis3">
         ...
    </div>
    <div class="basis1">
         ...
    </div>
    <div class="flex basis1">
         ...
    </div>
  </div>
1
2
3 
<div class="container center-center">
    <div class="basis2">
         ...
    </div>
    <div class="basis3">
         ...
    </div>
    <div class="basis2">
         ...
    </div>
  </div>
1
2 
<div class="container center-center">
    <div class="basis1">
         ...
    </div>
    <div class="basis5">
         ...
    </div>
  </div>